<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - OBJLoader + MTLLoader</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			font-family: Monospace;
			background-color: #000;
			color: #fff;
			margin: 0px;
			overflow: hidden;
		}

		#info {
			color: #fff;
			position: absolute;
			top: 10px;
			width: 100%;
			text-align: center;
			z-index: 100;
			display: block;
		}

		#info a,
		.button {
			color: #f00;
			font-weight: bold;
			text-decoration: underline;
			cursor: pointer
		}
	</style>
</head>

<body>
	<div id="info">
		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader + MTLLoader
	</div>

	<script src="js/three.js"></script>

	<script src="js/loaders/DDSLoader.js"></script>
	<script src="js/loaders/MTLLoader.js"></script>
	<script src="js/loaders/OBJLoader.js"></script>

	<script src="js/Detector.js"></script>
	<script src="js/controls/OrbitControls.js"></script>
	<script src="js/libs/stats.min.js"></script>

	<script>
		var container, stats;
		var camera, scene, renderer, controls;
		var mouseX = 0, mouseY = 0;
		var windowHalfX = window.innerWidth / 2;
		var windowHalfY = window.innerHeight / 2;
		var gmaterials;
		/**
		* 初始化灯光
		*/
		function initLight() {
			//*
			//环境光，没有方向，任意方向的发射光线
			var ambient = new THREE.AmbientLight(0xffeedd);
			//环境光强度
			ambient.intensity = 0.3;
			//场景加入环境光
			scene.add(ambient);

			var light = new THREE.DirectionalLight(0xffffff);
			light.position.set(1, 1, 1);
			scene.add(light);
			var light = new THREE.DirectionalLight(0x002288);
			light.position.set(- 1, - 1, - 1);
			scene.add(light);
			// var light = new THREE.AmbientLight( 0x222222 );
			// scene.add( light );

		}

		init();
		animate();

		function init() {
			container = document.createElement('div');
			document.body.appendChild(container);
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20000);
			camera.position.z = 10;
			// scene
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0xcccccc);
			scene.add(camera);
			//
			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);

			container.appendChild(renderer.domElement);


			// model
			var onProgress = function (xhr) {
				if (xhr.lengthComputable) {
					var percentComplete = xhr.loaded / xhr.total * 100;
					console.log(Math.round(percentComplete, 2) + '% downloaded');
				}
			};
			var onError = function (xhr) { };
			THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
			var mtlLoader = new THREE.MTLLoader();
			mtlLoader.setPath('models/obj/666/');
			mtlLoader.load('666.mtl', function (materials) {
				gmaterials = materials;
				materials.preload();
				var objLoader = new THREE.OBJLoader();
				objLoader.setMaterials(materials);
				objLoader.setPath('models/obj/666/');
				objLoader.load('666.obj', function (object) {
					//object.position.y = - 0;
					scene.add(object);
				}, onProgress, onError);
			});



			initLight();

			// world
			var geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
			var material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });
			for (var i = 0; i < 500; i++) {
				var mesh = new THREE.Mesh(geometry, material);
				mesh.position.x = Math.random() * 1600 - 800;
				mesh.position.y = 0;
				mesh.position.z = Math.random() * 1600 - 800;
				mesh.updateMatrix();
				mesh.matrixAutoUpdate = false;
				scene.add(mesh);
			}

			// controls
			controls = new THREE.OrbitControls(camera, renderer.domElement);
			//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
			//
			window.addEventListener('resize', onWindowResize, false);
		}
		function onWindowResize() {
			windowHalfX = window.innerWidth / 2;
			windowHalfY = window.innerHeight / 2;
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
		//
		function animate() {
			requestAnimationFrame(animate);
			controls.update();
			render();
		}
		function render() {
			renderer.render(scene, camera);
		}
	</script>

</body>

</html>